@extends('admin.master')

@section('top')
	<div class="top-breadcrumb pull-left">{!! Breadcrumbs::render('department') !!}</div>
	<div class="top-btn-group pull-right">
		<a href="{{ route('admin.department.create') }}" class="btn btn-primary">添加部门</a>
	</div>
@endsection

@section('content')
{!! Form::open(['url'=>'admin/menu/sort']) !!}
	<table class="table table-hover table-list">
		<thead>
			<tr>
				<th width="65" class="text-center">ID</th>
				<th>名称</th>
				<th>主管</th>
				<th class="text-right">操作</th>
			</tr>
		</thead>
		<tbody>
		@foreach ($data as $value)
			<tr>
				<td class="text-center">{{ $value['id'] }}</td>
				<td>{{ $value['name'] }}</td>
				<td>
					@if ($users->get($value['manager'])) 
						<a href="javascript:;" class="manager-change" data-department="{{ $value['id'] }}" data-id="{{ $value['manager'] }}">
							<code>{{ $users->get($value['manager'])->name }}</code>
						</a>
					@else
						<a href="javascript:;" class="manager-change" data-department="{{ $value['id'] }}">
							<code>添加主管</code>
						</a>
					@endif
				</td>
				<td class="text-right">
					<div class="toolbar">
						<a href="{{ route('admin.department.edit', $value['id']) }}" class="btn-link">修改</a>
						<span class="text-explode ">|</span>
						<a href="javascript:void(0);" data-id="{{ $value['id'] }}" class="btn-link delete-item">删除</a>
					</div>
				</td>
			</tr>
			@if (isset($value['children']) && !empty($value['children']))
				@foreach ($value['children'] as $children)
				<tr>
					<td class="text-center">{{ $children['id'] }}</td>
					<td class="menu-son">{{ $children['name'] }}</td>
					<td>
					@if ($users->get($children['manager'])) 
						<a href="javascript:;" class="manager-change" data-department="{{ $children['id'] }}" data-id="{{ $children['manager'] }}">
							<code>{{ $users->get($children['manager'])->name }}</code>
						</a>
					@else
						<a href="javascript:;" class="manager-change" data-department="{{ $children['id'] }}">
							<code>添加主管</code>
						</a>
					@endif
					</td>
					<td class="text-right">
						<div class="toolbar">
							<a href="{{ route('admin.department.edit', $children['id']) }}" class="btn-link">修改</a>
							<span class="text-explode ">|</span>
							<a href="javascript:void(0);" data-id="{{ $children['id'] }}" class="btn-link delete-item">删除</a>
						</div>
					</td>
				</tr>
				@endforeach
			@endif
		@endforeach
		</tbody>
	</table>
	<!-- Modal -->
	<div class="modal fade" id="dialog-user" tabindex="-1" role="dialog">
	  <div class="modal-dialog">
	    <div class="modal-content">
	        <div class="modal-header">
	            <button type="button" class="close" data-dismiss="modal" aria-label="true"><span aria-hidden="true">&times;</span></button>
	            <h4 class="modal-title">选择用户</h4>
	        </div>
	        <div class="modal-body clearfix">
	        	<input type="text" class="form-control" v-model="word" placeholder="输入业务姓名搜索">
	        	<input type="hidden" name="department" class="department-hidden" value="0">
				<div class='salers-list mt15' data-url="{{ url('admin/department/update-manager') }}">
					<a href='javascript:;' v-bind:class="{ 'active': id==$key }" data-id="@{{ $key }}" v-for="item in users | filterBy word">
					  @{{ item.name }}
					</a>
				</div>
	        </div>
	    </div>
	  </div>
	</div>
	<!-- Modal End -->

{!! Form::close() !!}
@endsection

@section('foot')
<script>
	var vm = new Vue({
		el: '#dialog-user',
		data: {
			id: 0,
			users: {!! $users !!}
		}
	});

	$('.manager-change').on('click', function() {
		if ($(this).data('id') > 0) {
			$(".salers-list > a[data-id='"+$(this).data('id')+"']").addClass('active').siblings().removeClass('active');
		}

		if ($(this).data('department') > 0) {
			$('.department-hidden').val($(this).data('department'));
		}

		$('#dialog-user').modal('show');
	});

	$('.salers-list').on('click', 'a', function() {
		location.href = $('.salers-list'). data('url') + '/' + $('.department-hidden').val() + '?manager=' + $(this).data('id');
	});
</script>	
@endsection